<template>
	<div
	:class="[[prefixCls+'-card'],borderType,shadowShow]" 
	:style="{borderRadius:radius+'px'}">
		<div :class="[prefixCls+'-card-head']" v-if="this.$slots.title || this.$slots.extra" :style="{borderRadius:(radius+'px'+' '+radius +'px 0 0')}">
			<slot name="title"></slot>
			<slot name="extra"></slot>
		</div>
		<div :class="[prefixCls+'-card-body']">
			<slot></slot>
		</div>
	</div>
</template>

<script>
import { prefixCls } from '../prefix'
import './card.css'

export default {
	name: `${prefixCls}Card`,
	props:['radius','border','shadow'],
	data() {
		const shadow = (type) =>{
			switch (type) {
				case 'always':
					return 'mj-card-shadow'
				case 'hover':
					return 'mj-card-hover'
			} 
		}
		return {
			prefixCls: prefixCls,
			borderType:this.border=='false'?'mj-card-no-border':'',
			shadowShow:shadow(this.shadow)
		}
	},
}
</script>